<template>

  <div style="margin-top: 20px;margin-left: 20px;width: 100%">
    <div>
      <el-carousel :interval="4000" indicator-position="outside" type="card" height="224px">
        <el-carousel-item v-for="item in pic" :key="item">
          <img style="height: 224px" :src=item>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="background-color: #409EFF;border-radius: 10px">
      <div style="padding-top: 10px;padding-bottom:10px;margin-left: 10px;color: white;font-size: smaller">
        <p>本站已收录关键词 <b> {{ wordsCount }} </b> 条</p>
        <p>如遇到bug，可点击聊天室，在 <b>ChatRobot</b> 对话框下留言</p>
      </div>
    </div>
    <div v-if="isAdmin">
      <el-button style="margin-top: 20px" type="primary" @click="addPromote()"> 添加关键词</el-button>
      <!--      <el-button style="margin-top: 20px" type="primary" @click="addCategory()"> 添加分类 </el-button>-->
    </div>

    <div v-for="aiWord in aiWords">
      <h2 style="margin-top: 20px">{{ aiWord.title }}</h2>
      <el-checkbox-group style="margin-top: 10px" v-model="checkboxGroup" size="medium">
        <el-checkbox-button v-for="word in aiWord.words" :label="word" :key="word">{{ word }}</el-checkbox-button>
      </el-checkbox-group>
    </div>

    <div style="margin-top: 20px" v-for="(radioWord,index) in radioWords">
      <h2>{{ radioWord.category }}</h2>
      <el-select style="margin-top: 20px" v-model="values[index]" clearable placeholder="请选择">
        <el-option
            v-for="item in radioWord.words"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div>
      <el-button style="margin-top: 20px" type="primary" @click="buildPromote()"> 生成描述</el-button>
      <el-button style="margin-top: 20px" type="info" @click="clearAll()"> 清空所有</el-button>
    </div>
  </div>

  <el-dialog title="提示" v-model="addWindowShow" width="30%">

    <el-form :model="addForm" label-width="120px">
      <el-form-item label="分类">
        <el-radio v-for="(cate,index) in category" v-model="categoryOptions" :label=cate>{{ cate }}</el-radio>
      </el-form-item>
      <el-form-item label="关键词描述">
        <el-input type="textarea" v-model="addForm.chineseWord" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="promote">
        <el-input type="textarea" v-model="addForm.promoteWord" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="addWindowShow = false">取 消</el-button>
            <el-button type="primary" @click="savePromote()">确 定</el-button>
          </span>
    </template>
  </el-dialog>
</template>


<script>
import request from "@/utils/request";

function getUserInfo() {
  let userStr = sessionStorage.getItem("user") || "{}"
  this.user = JSON.parse(userStr)
  // 请求服务端，确认当前登录用户的 合法信息
  request.get("/v1/sys/user/" + this.user.sysUser.id).then(res => {
    if (res.code === '0') {
      this.user = res.data
      let roleCodeList = this.user.roles.map(r => r.code);
      while (roleCodeList.length > 0) {
        let roleCode = roleCodeList.pop();
        if (roleCode === 'super' || roleCode === 'admin') {
          this.isAdmin = true
          break
        }
      }
    }
  })
}

function getPic() {
  request.get("/ai/pic").then(res => {
    if (res.code === '0') {
      this.pic.pop()
      for (const resKey in res.data) {
        this.pic.push(res.data[resKey].picUrl)
      }
    } else {
      this.$message.error(res.msg)
    }
  })
}

function load() {
  this.wordsCount = 0
  request.get("/ai/get").then(res => {
    if (res.code === '0') {
      this.aiWords = res.data
    } else {
      this.$message.error(res.msg)
    }
  })

  request.get("/ai/radio").then(res => {
    if (res.code === '0') {
      this.radioWords = res.data
    } else {
      this.$message.error(res.msg)
    }
  })

  request.get("/ai/count").then(res => {
    if (res.code === '0') {
      this.wordsCount = res.data
    } else {
      this.$message.error(res.msg)
    }
  })
}

export default {
  name: "Ai",
  components: {},
  data() {
    return {
      addForm: {},
      category: [],
      categoryOptions: '',
      checkboxGroup: [],
      aiWords: [],
      radioWords: [],
      values: [],
      user: {},
      isAdmin: false,
      addWindowShow: false,
      wordsCount: 0,
      pic: ["https://yitiaoit.oss-cn-beijing.aliyuncs.com/img/image-20230412132152656.png"]
    }
  },
  created() {
    getUserInfo.call(this);
    load.call(this);
    getPic.call(this);
  },
  methods: {
    buildPromote() {
      if (this.checkboxGroup.length === 0 && this.values.length === 0) {
        this.$message.info("请选择关键词")
      } else {
        request.post("/ai/build", this.checkboxGroup).then((res => {
          console.log(res)
          if (res.code === '0') {
            if (this.values.length > 0 && res.data !== "") {
              res.data = res.data + ","
            }
            let mesInfo = res.data + this.values.join(",");
            this.$alert(mesInfo, '描述词', {
              confirmButtonText: '复制',
              callback: action => {
                if (action === "confirm") {
                  this.$copyText(mesInfo).then(() => {
                    this.$message({
                      type: 'success',
                      message: `复制成功`
                    });
                  })
                }
              }
            });
          } else {
            this.$message.error(res.msg)
          }
        }))
        this.clearAll()
      }
    },
    clearAll() {
      this.checkboxGroup = []
    },
    addPromote() {
      request.get("/ai/category").then(res => {
        if (res.code === '0') {
          this.category = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
      this.addWindowShow = true;
    },
    savePromote() {
      if (this.addForm.chineseWord === undefined ||
          this.addForm.promoteWord === undefined ||
          this.categoryOptions === '') {
        this.$message.error("请填写完整")
      } else {
        this.addForm.categoryName = this.categoryOptions
        request.post("/ai/add", this.addForm).then(res => {
          console.log(this.addForm)
          if (res.code === '0') {
            this.$message.success("保存成功")
            load.call(this)
          } else {
            this.$message.error("保存失败")
          }
        })
        this.addWindowShow = false;
      }
    },
    addCategory() {

    },
    saveCategory() {

    }
  },

}
</script>

<style scoped>
/*.el-carousel__item h3 {*/
/*  color: #475669;*/
/*  font-size: 14px;*/
/*  opacity: 0.75;*/
/*  line-height: 200px;*/
/*  margin: 0;*/
/*}*/

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>